<template>
  <div class="box">
    <!-- 叉号 -->
    <div class="ico">
      <router-link to="/">
        <span class="el-icon-back"></span>
      </router-link>
    </div>
    <!-- 图标标题 -->
    <div class="title">
      <img src="../images/sunshine.svg" alt />
    </div>
    <!-- 用户输入电话号码和输入密码 -->
    <div class="cell-phone">
      <AuthInput
        type="text"
        placeholder="请输入昵称"
        :rule="/^\w{3,11}$/"
        err_msg="昵称必须是三位字符"
        @valChange="setusername"
      />
      <AuthInput
        type="password"
        placeholder="请输入密码"
        :rule="/^\w{3,8}$/"
        err_msg="密码不合法"
        @valChange="setpassword"
      />
    </div>
    <!-- 登录按钮和注册按钮 -->

    <div class="login">
      <AuthBtn btnText="登录" @submit="login" />
      <router-link to="/register" class="rgs">
        <button class="register">注册</button>
      </router-link>
    </div>
  </div>
</template>

<script>
// 1. 引入子组件
import AuthInput from "../components/AuthInput";
import AuthBtn from "../components/AuthBtn";
export default {
  data() {
    return {
      username: "",
      password: "",
    };
  },
  // 2. 注册子组件
  components: {
    AuthInput,
    AuthBtn,
  },
  methods: {
    login() {
      // console.log("这里是登录");
      // console.log("用户名", this.username);
      // console.log("密码", this.password);

      //请求前判断用户输入的信息不能为空 为空弹出提示
      if (!this.username || !this.password) {
        this.$toast.fail("请输入完整信息");
        return;
      }
      // 发送axios请求
      this.$axios({
        method: "post",
        url: "/login",
        data: {
          username: this.username,
          password: this.password,
        },
      })
        .then((res) => {
          console.log(res.data);

          // 登录成功逻辑
          if (res.data.message == "登录成功") {
            this.$toast.success(res.data.message);
            //这里登录成功后应该把token存起来 以及id
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem("userId", res.data.data.user.id);
            // 然后再跳转到个人登录页
            setTimeout(() => {
              this.$router.replace("/person");
            }, 500);
            // 用户密码错误逻辑
          }
        })
        .catch((err) => {
          // 如果是网络问题以及其他错误逻辑
          this.$toast.fail("系统错误");
        });
    },

    setusername(newUser) {
      this.username = newUser;
    },
    setpassword(newPass) {
      this.password = newPass;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  padding: 24/360 * 100vw;
  .ico {
    .el-icon-back {
      font-size: 27/360 * 100vw;
    }
  }
  .title {
    margin-top: 18/360 * 100vw;
    text-align: center;
    img {
      width: 120/360 * 100vw;
    }
  }

  .login {
    button {
      outline: none;
      margin-top: 50/360 * 100vw;
      width: 318/360 * 100vw;
      height: 48/360 * 100vw;
      background-color: #cc3300;
      color: #fff;
      border-radius: 30/360 * 100vw;
      text-align: center;
      line-height: 48/360 * 100vw;
      border: 0;
    }
  }
  .rgs {
    text-decoration: none;
  }
  .login {
    .register {
      margin-top: 20/360 * 100vw;
    }
  }
}
</style>

